<template>
  <div>
    <van-cell-group>
      <van-cell v-for="(option, index) in options" :key="index" :title="option" @click="$bus.$emit('search', option)">
        <van-icon name="search" class="search-icon icon" slot="icon"/>
        <div slot="title" v-html="hightLight(option)"></div>
      </van-cell>
      <!-- <van-cell title="单元格" label="描述信息" /> -->
    </van-cell-group>
  </div>
</template>

<script>
import { debounce } from 'lodash'
import {getSuggestion} from '../../../api/user';
export default {
  name: "Suggestion",
  created() {},
  data() {
    return {
      options:[]
    };
  },
  props: {
    searchText:{
      type:String
    }
  },
  methods: {
    hightLight(option){
      // 先找到 我所需要的 文本  然后全局匹配    在 数据中 设置 我所需要的样式 来替换 所匹配到的 文本
      const reg =new RegExp(this.searchText,'gi')
      return option.replace(reg,`<span style="color:red">${this.searchText}</span>`)
    }
  },
  watch:{
    searchText:{
      handler: debounce(async function(value){
        if(value!==''){
          const {data}=await getSuggestion(value)
          this.options=data.data.options
        }
      },300),
      immediate:true
    }
  }
};
</script>
<style lang="less" scoped>
/deep/.icon{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 5px;
}
</style>
